<template>
    <div style="width:calc(100% - 10px);height:305px;" id="home_page_map"></div>
</template>

<script>
  import echarts from 'echarts';
  import geoData from '../map-data/get-geography-value.js';
  export default {
    name: 'homeMap',
    props: {
      cityData: Array
    },
    data() {
      return{
        listen: null,
      }
    },
    mounted () {
      var convertData = function (data) {
        let res = [];
        let len = data.length;
        for (var i = 0; i < len; i++) {
          var geoCoord = geoData[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };

      var map = echarts.init(document.getElementById('home_page_map'));
      const chinaJson = require('../map-data/china.json');
      echarts.registerMap('china', chinaJson);
      map.setOption({
        backgroundColor: '#FFF',
        geo: {
          map: 'china',
          label: {
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#EFEFEF',
              borderColor: '#CCC'
            },
            emphasis: {
              areaColor: '#E5E5E5'
            }
          }
        },
        grid: {
          top: 0,
          left: '2%',
          right: '2%',
          bottom: '0',
          containLabel: true
        },
        series: [{
          type: 'scatter',
          coordinateSystem: 'geo',
          data: convertData(this.cityData),
          symbolSize: function (val) {
            return val[2] / 10;
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: false
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#0099CC'
            }
          }
        }]

      });
      this.listenFun = function () {
        map.resize();
      }
      this.listen = map
      window.addEventListener('resize', this.listenFun());
    },
    methods:{
      listenFun(){
        this.listen.resize();
      }
    },
    beforeDestroy(){
      window.removeEventListener('resize', this.listenFun());
    }
  };
</script>


